<template>
    <div class="List">
        <div class="List-header">
            <h4 class="List-header-Text">
                <span>我的收藏</span>
            </h4>
            <div class="List-headerOptions">
                <div class="Popver">

                </div>
            </div>

        </div>
        <div class="css-1g5evo1">
            <div class="css-1jfwu0r">
                <div class="css-sumlaa">
                    <svg width="150" height="120" viewBox="0 0 150 120" fill="currentColor"><path fill="#E7EAF1" d="M39.09 35.994c.05-3.31 2.777-5.994 6.096-5.994h18.562c2.21 0 4.667 1.66 5.487 3.708L70.152 36h34.85A5.997 5.997 0 0 1 111 41.99v40.02c0 3.308-2.69 5.99-6 5.99H45c-3.314 0-6-2.686-6-5.99V41.99c0-.077 0-.153.004-.23l.086-5.766zm2.914 5.81L42 41.99v40.02A2.998 2.998 0 0 0 45 85h60c1.655 0 3-1.342 3-2.99V41.99a2.998 2.998 0 0 0-3-2.99H68.12l-1.67-4.177C66.085 33.915 64.73 33 63.747 33h-18.56c-1.68 0-3.07 1.368-3.097 3.038l-.086 5.767zM69.89 72.658c-1.56.715-3.105-.395-2.906-2.113l.697-6.032-4.11-4.47c-1.16-1.265-.58-3.076 1.115-3.418l5.952-1.2 2.982-5.29c.843-1.498 2.744-1.507 3.593 0l2.98 5.29 5.955 1.2c1.684.34 2.28 2.145 1.11 3.418l-4.11 4.47.698 6.032c.197 1.708-1.336 2.832-2.908 2.113l-5.52-2.527-5.523 2.53z"></path></svg>
                    <div>还没有收藏夹，<button type="button" class="Button Button--link Button--withLabel">创建第一个收藏夹</button></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Collect"
    }
</script>

<style scoped>
    .List-header{
        display: flex;
        -webkit-box-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        align-items: center;
        height: 50px;
        margin: 0 20px;
        border-bottom: 1px solid #f6f6f6;
        box-sizing: border-box;
    }
    .List-header-Text{
        font-weight: 600;
        margin: 0;
    }
    h4{
        display: block;
        margin-block-start: 1.33em;
        margin-block-end: 1.33em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    }
    .List-headerOptions{
        display: flex;
        -webkit-box-pack: center;
        justify-content: center;
        align-self: center;
        font-size: 14px;
    }
    .Popver{
        position: relative;
        display: inline-block;
    }
    .css-1g5evo1{
        padding: 70px 0px;
    }
    .css-1jfwu0r{
        box-sizing: border-box;
        margin: 0px;
        min-width: 0px;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
        flex: 1 1 0%;
        height: 100%;
        display: flex;
    }
    .css-sumlaa{
        box-sizing: border-box;
        margin: 0px;
        min-width: 0px;
        text-align: center;
        color: rgb(133, 144, 166);
    }
    .css-sumlaa svg{
        width: 150px;
        height: 120px;
        fill: currentcolor;
    }
    .Button--link{
        color: #175199;
        height: auto;
        padding: 0;
        line-height: inherit;
        background-color: transparent;
        border: none;
        border-radius: 0;
    }
</style>